<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>约会活动列表 - 社交约会平台</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        /* 基础样式 */
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #f5f7fa;
            color: #2d3748;
        }
        
        /* 导航栏 */
        .navbar {
            background-color: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        
        .logo {
            font-weight: 700;
            font-size: 1.5rem;
            color: #e91e63;
        }
        
        /* 页面标题 */
        .page-header {
            padding: 2.5rem 0;
            text-align: center;
        }
        
        .page-title {
            font-weight: 800;
            color: #1a202c;
            margin-bottom: 0.75rem;
        }
        
        .page-subtitle {
            color: #718096;
            max-width: 700px;
            margin: 0 auto;
        }
        
        /* 分类导航 */
        .category-nav {
            margin-bottom: 2rem;
            overflow-x: auto;
            padding-bottom: 0.5rem;
        }
        
        .category-nav::-webkit-scrollbar {
            height: 6px;
        }
        
        .category-nav::-webkit-scrollbar-thumb {
            background-color: #cbd5e0;
            border-radius: 3px;
        }
        
        .category-list {
            display: flex;
            gap: 0.75rem;
            min-width: max-content;
        }
        
        .category-item {
            padding: 0.5rem 1.25rem;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            background-color: white;
            border: 1px solid #e2e8f0;
            color: #718096;
            white-space: nowrap;
        }
        
        .category-item.active {
            background-color: #e91e63;
            color: white;
            border-color: #e91e63;
        }
        
        .category-item:hover:not(.active) {
            border-color: #cbd5e0;
            color: #4a5568;
        }
        
        /* 筛选工具栏 */
        .filter-bar {
            background-color: white;
            border-radius: 10px;
            padding: 1rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        
        .sort-control {
            width: auto;
            padding: 0.375rem 1rem;
            border-radius: 6px;
            border: 1px solid #e2e8f0;
        }
        
        /* 约会卡片容器 */
        .dating-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
            margin-bottom: 3rem;
        }
        
        /* 约会卡片 */
        .dating-card {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .dating-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 12px 24px rgba(0,0,0,0.08);
        }
        
        /* 特殊卡片布局 */
        .featured-card {
            grid-column: span 2;
            flex-direction: row;
        }
        
        .wide-card {
            grid-column: span 2;
        }
        
        .double-card {
            grid-column: span 1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }
        
        /* 媒体容器 */
        .dating-media {
            position: relative;
            width: 100%;
            flex-shrink: 0;
            background-color: #f7fafc;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        
        /* 媒体容器尺寸 */
        .media-regular {
            height: 200px;
        }
        
        .media-wide {
            height: 260px;
        }
        
        .media-featured {
            width: 50%;
            height: auto;
            min-height: 320px;
        }
        
        .media-double {
            height: 100%;
            min-height: 180px;
        }
        
        /* 无图片状态 */
        .no-image {
            color: #a0aec0;
            text-align: center;
            padding: 2rem 1rem;
            width: 100%;
        }
        
        .no-image i {
            font-size: 3rem;
            margin-bottom: 0.75rem;
            color: #f687b3;
        }
        
        /* 多图网格布局 */
        .image-grid {
            display: grid;
            width: 100%;
            height: 100%;
            gap: 2px;
        }
        
        .one-img {
            grid-template-columns: 1fr;
        }
        
        .two-img {
            grid-template-columns: 1fr 1fr;
        }
        
        .three-img {
            grid-template-columns: 2fr 1fr;
            grid-template-rows: 1fr 1fr;
        }
        
        .three-img img:first-child {
            grid-column: 1;
            grid-row: 1 / 3;
        }
        
        .four-img {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
        }
        
        .dating-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .dating-card:hover .dating-media img {
            transform: scale(1.05);
        }
        
        /* 图片数量指示 */
        .image-count {
            position: absolute;
            bottom: 8px;
            right: 8px;
            background-color: rgba(0,0,0,0.6);
            color: white;
            border-radius: 12px;
            padding: 2px 8px;
            font-size: 0.75rem;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        /* 日期标签 */
        .date-badge {
            position: absolute;
            top: 8px;
            left: 8px;
            background-color: #e91e63;
            color: white;
            border-radius: 4px;
            padding: 2px 8px;
            font-size: 0.85rem;
            font-weight: 600;
        }
        
        /* 卡片内容区 */
        .dating-content {
            padding: 1.25rem;
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .featured-card .dating-content {
            width: 50%;
        }
        
        .double-card .dating-content {
            padding: 1rem;
        }
        
        /* 分类标签 */
        .dating-category {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 500;
            margin-bottom: 0.5rem;
        }
        
        .cat-food {
            background-color: #fff5f5;
            color: #c53030;
        }
        
        .cat-movie {
            background-color: #edf2f7;
            color: #2b6cb0;
        }
        
        .cat-sport {
            background-color: #f0fff4;
            color: #22543d;
        }
        
        .cat-art {
            background-color: #fffaf0;
            color: #c05621;
        }
        
        .cat-travel {
            background-color: #f6f9fc;
            color: #3182ce;
        }
        
        .cat-music {
            background-color: #fefcbf;
            color: #d69e2e;
        }
        
        /* 标题和描述 */
        .dating-title {
            font-weight: 700;
            font-size: 1.15rem;
            color: #1a202c;
            margin-bottom: 0.5rem;
            transition: color 0.2s;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .dating-card:hover .dating-title {
            color: #e91e63;
        }
        
        .dating-desc {
            color: #718096;
            font-size: 0.9rem;
            margin-bottom: 1rem;
            flex: 1;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.5;
        }
        
        /* 作者信息 */
        .dating-author {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid #edf2f7;
        }
        
        .author-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #f7fafc;
        }
        
        .author-info {
            flex: 1;
        }
        
        .author-name {
            font-weight: 600;
            color: #1a202c;
            font-size: 0.9rem;
            margin: 0;
        }
        
        .author-meta {
            font-size: 0.8rem;
            color: #a0aec0;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .location {
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }
        
        /* 统计和操作区 */
        .dating-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.85rem;
            color: #718096;
        }
        
        .action-stats {
            display: flex;
            gap: 1rem;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }
        
        .action-buttons {
            display: flex;
            gap: 0.75rem;
        }
        
        .action-btn {
            background: none;
            border: none;
            color: #718096;
            cursor: pointer;
            transition: all 0.2s;
            padding: 0.25rem;
            border-radius: 4px;
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }
        
        .action-btn:hover {
            color: #e91e63;
            background-color: #fff5f5;
        }
        
        .action-btn.liked {
            color: #e91e63;
        }
        
        .action-btn.saved {
            color: #ed8936;
        }
        
        /* 加载更多 */
        .load-more {
            text-align: center;
            margin: 2rem 0 4rem;
        }
        
        .load-more-btn {
            padding: 0.75rem 2rem;
            border-radius: 6px;
            font-weight: 500;
            background-color: white;
            border: 1px solid #e91e63;
            color: #e91e63;
            transition: all 0.2s;
        }
        
        .load-more-btn:hover {
            background-color: #e91e63;
            color: white;
        }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .featured-card, .wide-card {
                grid-column: span 1;
            }
            
            .featured-card {
                flex-direction: column;
            }
            
            .featured-card .dating-media,
            .featured-card .dating-content {
                width: 100%;
            }
            
            .media-featured {
                min-height: 240px;
            }
        }
        
        @media (max-width: 768px) {
            .dating-grid {
                grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            }
            
            .double-card {
                grid-template-columns: 1fr;
            }
            
            .page-title {
                font-size: 1.75rem;
            }
        }
        
        @media (max-width: 576px) {
            .dating-grid {
                grid-template-columns: 1fr;
            }
            
            .dating-actions {
                flex-wrap: wrap;
                gap: 0.75rem;
            }
            
            .action-buttons {
                margin-top: 0.5rem;
                width: 100%;
                justify-content: flex-end;
            }
            
            .media-regular {
                height: 180px;
            }
            
            .media-wide {
                height: 220px;
            }
        }
        
        /* 动画效果 */
        .animate-in {
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.4s ease-out, transform 0.4s ease-out;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg py-3">
        <div class="container">
            <a href="#" class="logo d-flex align-items-center gap-2">
                <i class="fas fa-heart text-danger"></i>
                <span>遇见</span>
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <i class="fas fa-bars"></i>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto gap-4">
                    <li class="nav-item">
                        <a href="#" class="nav-link active fw-medium">首页</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">发现约会</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">我的约会</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">消息</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="btn btn-danger" style="color: white;">
                            <i class="fas fa-plus me-1"></i> 发布约会
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <!-- 主内容区 -->
    <div class="container py-4">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">热门约会活动</h1>
            <p class="page-subtitle">发现有趣的约会活动，认识新朋友，一起体验精彩时光</p>
        </div>
        
        <!-- 分类导航 -->
        <div class="category-nav">
            <div class="category-list container">
                <div class="category-item active">全部活动</div>
                <div class="category-item">美食探店</div>
                <div class="category-item">电影观影</div>
                <div class="category-item">运动健身</div>
                <div class="category-item">艺术展览</div>
                <div class="category-item">户外旅行</div>
                <div class="category-item">音乐演出</div>
                <div class="category-item">手工制作</div>
                <div class="category-item">讲座沙龙</div>
            </div>
        </div>
        
        <!-- 筛选工具栏 -->
        <div class="filter-bar d-flex flex-wrap justify-content-between align-items-center gap-3">
            <div class="d-flex align-items-center gap-2">
                <span class="text-muted">排序方式:</span>
                <select class="sort-control">
                    <option value="recommend">智能推荐</option>
                    <option value="newest">最新发布</option>
                    <option value="popular">热门优先</option>
                    <option value="date-asc">日期从近到远</option>
                    <option value="date-desc">日期从远到近</option>
                </select>
            </div>
            
            <div class="d-flex align-items-center gap-2">
                <span class="text-muted">显示:</span>
                <button class="action-btn active" title="网格视图">
                    <i class="fas fa-th"></i>
                </button>
                <button class="action-btn" title="列表视图">
                    <i class="fas fa-list"></i>
                </button>
            </div>
        </div>
        
        <!-- 约会卡片网格 -->
        <div class="dating-grid">
            <!-- 精选约会卡片 - 3张图片 -->
            <div class="dating-card featured-card animate-in">
                <div class="dating-media media-featured">
                    <div class="image-grid three-img">
                        <img src="https://picsum.photos/800/800?random=10" alt="艺术展展览现场1">
                        <img src="https://picsum.photos/400/400?random=11" alt="艺术展展览作品2">
                        <img src="https://picsum.photos/400/400?random=12" alt="艺术展互动区3">
                    </div>
                    <div class="image-count">
                        <i class="fas fa-images"></i> 3
                    </div>
                    <div class="date-badge">10月15日</div>
                </div>
                
                <div class="dating-content">
                    <span class="dating-category cat-art">艺术展览</span>
                    <h3 class="dating-title">当代艺术展结伴参观，寻找同样喜欢艺术的你</h3>
                    
                    <p class="dating-desc">
                        周末想去看新开展的当代艺术展，希望找个同样对艺术感兴趣的朋友一起去。展览包括绘画、雕塑和多媒体作品，结束后可以一起去附近的咖啡馆聊聊对作品的感受。我会提前准备一些展览背景资料，希望能有愉快的交流。
                    </p>
                    
                    <div class="dating-author">
                        <img src="https://picsum.photos/200/200?random=201" alt="林小雨的头像" class="author-avatar">
                        <div class="author-info">
                            <p class="author-name">林小雨</p>
                            <div class="author-meta">
                                <span class="location">
                                    <i class="fas fa-map-marker-alt fa-sm"></i>
                                    <span>当代艺术馆</span>
                                </span>
                                <span>· 艺术教师</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="dating-actions">
                        <div class="action-stats">
                            <div class="stat-item" title="浏览量">
                                <i class="far fa-eye"></i>
                                <span>3.2k</span>
                            </div>
                            <div class="stat-item" title="评论数">
                                <i class="far fa-comment"></i>
                                <span>87</span>
                            </div>
                            <div class="stat-item" title="报名人数">
                                <i class="far fa-user"></i>
                                <span>12</span>
                            </div>
                        </div>
                        <div class="action-buttons">
                            <button class="action-btn" title="点赞">
                                <i class="far fa-heart"></i>
                            </button>
                            <button class="action-btn" title="收藏">
                                <i class="far fa-bookmark"></i>
                            </button>
                            <button class="action-btn" title="报名参加">
                                <i class="fas fa-check-circle"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 4张图片的约会 - 宽卡片 -->
            <div class="dating-card wide-card animate-in">
                <div class="dating-media media-wide">
                    <div class="image-grid four-img">
                        <img src="https://picsum.photos/600/600?random=20" alt="露营地风景1">
                        <img src="https://picsum.photos/600/600?random=21" alt="露营美食2">
                        <img src="https://picsum.photos/600/600?random=22" alt="露营活动3">
                        <img src="https://picsum.photos/600/600?random=23" alt="星空夜景4">
                    </div>
                    <div class="image-count">
                        <i class="fas fa-images"></i> 4
                    </div>
                    <div class="date-badge">10月22-23日</div>
                </div>
                
                <div class="dating-content">
                    <span class="dating-category cat-travel">户外旅行</span>
                    <h3 class="dating-title">周末郊外露营，篝火晚会+星空观测</h3>
                    
                    <p class="dating-desc">
                        组织一次短途露营活动，地点在城市周边的生态营地，车程约2小时。包含帐篷住宿、BBQ晚餐和星空观测活动。适合喜欢大自然、想放松心情的朋友。我会准备望远镜和一些户外游戏，希望能认识新朋友。
                    </p>
                    
                    <div class="dating-author">
                        <img src="https://picsum.photos/200/200?random=202" alt="王浩的头像" class="author-avatar">
                        <div class="author-info">
                            <p class="author-name">王浩</p>
                            <div class="author-meta">
                                <span class="location">
                                    <i class="fas fa-map-marker-alt fa-sm"></i>
                                    <span>青山湖营地</span>
                                </span>
                                <span>· 户外领队</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="dating-actions">
                        <div class="action-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>4.5k</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>124</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-user"></i>
                                <span>28</span>
                            </div>
                        </div>
                        <div class="action-buttons">
                            <button class="action-btn">
                                <i class="far fa-heart"></i>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-bookmark"></i>
                            </button>
                            <button class="action-btn">
                                <i class="fas fa-check-circle"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 1张图片的约会 -->
            <div class="dating-card animate-in">
                <div class="dating-media media-regular">
                    <div class="image-grid one-img">
                        <img src="https://picsum.photos/600/600?random=30" alt="爵士乐演出海报">
                    </div>
                    <div class="image-count">
                        <i class="fas fa-images"></i> 1
                    </div>
                    <div class="date-badge">10月14日</div>
                </div>
                
                <div class="dating-content">
                    <span class="dating-category cat-music">音乐演出</span>
                    <h3 class="dating-title">爵士乐队现场演出，寻找同样喜欢爵士乐的同伴</h3>
                    
                    <p class="dating-desc">
                        城中最棒的爵士俱乐部有演出，想找个喜欢爵士乐的朋友一起去。演出从晚上9点开始，结束后可以去附近的酒吧小坐聊天。我有两张票，希望能认识有共同音乐品味的朋友。
                    </p>
                    
                    <div class="dating-author">
                        <img src="https://picsum.photos/200/200?random=203" alt="陈音乐的头像" class="author-avatar">
                        <div class="author-info">
                            <p class="author-name">陈音乐</p>
                            <div class="author-meta">
                                <span class="location">
                                    <i class="fas fa-map-marker-alt fa-sm"></i>
                                    <span>蓝调爵士吧</span>
                                </span>
                                <span>· 音乐制作人</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="dating-actions">
                        <div class="action-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>1.8k</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>45</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-user"></i>
                                <span>5</span>
                            </div>
                        </div>
                        <div class="action-buttons">
                            <button class="action-btn">
                                <i class="far fa-heart"></i>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-bookmark"></i>
                            </button>
                            <button class="action-btn">
                                <i class="fas fa-check-circle"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 无图片的约会 -->
            <div class="dating-card animate-in">
                <div class="dating-media media-regular">
                    <div class="no-image">
                        <i class="fas fa-utensils"></i>
                        <div>美食探索</div>
                    </div>
                    <div class="date-badge">10月12日</div>
                </div>
                
                <div class="dating-content">
                    <span class="dating-category cat-food">美食探店</span>
                    <h3 class="dating-title">新开的米其林推荐餐厅试吃，寻找美食爱好者同行</h3>
                    
                    <p class="dating-desc">
                        城中新开了一家米其林主厨坐镇的创意料理餐厅，想找个同样喜欢美食的朋友一起去尝鲜。餐厅主打融合菜系，人均消费约600元，我已经订好了周六晚上的位置。
                    </p>
                    
                    <div class="dating-author">
                        <img src="https://picsum.photos/200/200?random=204" alt="李美食的头像" class="author-avatar">
                        <div class="author-info">
                            <p class="author-name">李美食</p>
                            <div class="author-meta">
                                <span class="location">
                                    <i class="fas fa-map-marker-alt fa-sm"></i>
                                    <span>四季轩</span>
                                </span>
                                <span>· 美食博主</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="dating-actions">
                        <div class="action-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>2.1k</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>67</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-user"></i>
                                <span>8</span>
                            </div>
                        </div>
                        <div class="action-buttons">
                            <button class="action-btn">
                                <i class="far fa-heart"></i>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-bookmark"></i>
                            </button>
                            <button class="action-btn">
                                <i class="fas fa-check-circle"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 双卡片布局 -->
            <div class="double-card animate-in">
                <!-- 2张图片的约会 -->
                <div class="dating-card">
                    <div class="dating-media media-double">
                        <div class="image-grid two-img">
                            <img src="https://picsum.photos/600/600?random=40" alt="瑜伽课程现场1">
                            <img src="https://picsum.photos/600/600?random=41" alt="瑜伽课程现场2">
                        </div>
                        <div class="image-count">
                            <i class="fas fa-images"></i> 2
                        </div>
                        <div class="date-badge">每周六</div>
                    </div>
                    
                    <div class="dating-content">
                        <span class="dating-category cat-sport">运动健身</span>
                        <h3 class="dating-title">晨间瑜伽课程，寻找瑜伽伙伴</h3>
                        
                        <p class="dating-desc">
                            周六早晨的户外瑜伽课，适合各个水平的练习者。
                        </p>
                        
                        <div class="dating-author">
                            <img src="https://picsum.photos/200/200?random=205" alt="张瑜伽的头像" class="author-avatar">
                            <div class="author-info">
                                <p class="author-name">张瑜伽</p>
                                <div class="author-meta">
                                    <span class="location">
                                        <i class="fas fa-map-marker-alt fa-sm"></i>
                                        <span>中央公园</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="dating-actions">
                            <div class="action-stats">
                                <div class="stat-item">
                                    <i class="far fa-eye"></i>
                                    <span>987</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-user"></i>
                                    <span>15</span>
                                </div>
                            </div>
                            <div class="action-buttons">
                                <button class="action-btn">
                                    <i class="far fa-heart"></i>
                                </button>
                                <button class="action-btn">
                                    <i class="fas fa-check-circle"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 无图片的约会 -->
                <div class="dating-card">
                    <div class="dating-media media-double">
                        <div class="no-image">
                            <i class="fas fa-film"></i>
                            <div>电影欣赏</div>
                        </div>
                        <div class="date-badge">10月13日</div>
                    </div>
                    
                    <div class="dating-content">
                        <span class="dating-category cat-movie">电影观影</span>
                        <h3 class="dating-title">经典电影放映会，黑白老电影爱好者集合</h3>
                        
                        <p class="dating-desc">
                            本周放映希区柯克经典作品，有免费茶点提供。
                        </p>
                        
                        <div class="dating-author">
                            <img src="https://picsum.photos/200/200?random=206" alt="赵电影的头像" class="author-avatar">
                            <div class="author-info">
                                <p class="author-name">赵电影</p>
                                <div class="author-meta">
                                    <span class="location">
                                        <i class="fas fa-map-marker-alt fa-sm"></i>
                                        <span>光影咖啡馆</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="dating-actions">
                            <div class="action-stats">
                                <div class="stat-item">
                                    <i class="far fa-eye"></i>
                                    <span>756</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-user"></i>
                                    <span>9</span>
                                </div>
                            </div>
                            <div class="action-buttons">
                                <button class="action-btn">
                                    <i class="far fa-heart"></i>
                                </button>
                                <button class="action-btn">
                                    <i class="fas fa-check-circle"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 3张图片的约会 -->
            <div class="dating-card animate-in">
                <div class="dating-media media-regular">
                    <div class="image-grid three-img">
                        <img src="https://picsum.photos/600/600?random=50" alt="手工陶艺体验1">
                        <img src="https://picsum.photos/600/600?random=51" alt="手工陶艺作品2">
                        <img src="https://picsum.photos/600/600?random=52" alt="手工陶艺环境3">
                    </div>
                    <div class="image-count">
                        <i class="fas fa-images"></i> 3
                    </div>
                    <div class="date-badge">10月16日</div>
                </div>
                
                <div class="dating-content">
                    <span class="dating-category cat-art">手工制作</span>
                    <h3 class="dating-title">手工陶艺体验课，一起制作专属陶器</h3>
                    
                    <p class="dating-desc">
                        专业陶艺工作室的体验课程，包含指导老师和所有材料。适合零基础参与者，完成的作品可以带回家作为纪念。课程时长约3小时，结束后可以一起交流创作心得。
                    </p>
                    
                    <div class="dating-author">
                        <img src="https://picsum.photos/200/200?random=207" alt="刘陶艺的头像" class="author-avatar">
                        <div class="author-info">
                            <p class="author-name">刘陶艺</p>
                            <div class="author-meta">
                                <span class="location">
                                    <i class="fas fa-map-marker-alt fa-sm"></i>
                                    <span>陶然工坊</span>
                                </span>
                                <span>· 设计师</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="dating-actions">
                        <div class="action-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>1.5k</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>32</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-user"></i>
                                <span>10</span>
                            </div>
                        </div>
                        <div class="action-buttons">
                            <button class="action-btn">
                                <i class="far fa-heart"></i>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-bookmark"></i>
                            </button>
                            <button class="action-btn">
                                <i class="fas fa-check-circle"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 无图片的约会 -->
            <div class="dating-card animate-in">
                <div class="dating-media media-regular">
                    <div class="no-image">
                        <i class="fas fa-book-reader"></i>
                        <div>读书会</div>
                    </div>
                    <div class="date-badge">10月20日</div>
                </div>
                
                <div class="dating-content">
                    <span class="dating-category cat-art">讲座沙龙</span>
                    <h3 class="wish-title">科幻文学读书会，本月主题：人工智能</h3>
                    
                    <p class="dating-desc">
                        每月一次的科幻文学读书会，本月讨论人工智能相关的科幻作品。无论你是科幻迷还是AI从业者，都欢迎参加。我们会提供茶水和小点心，希望能有深入的思想交流。
                    </p>
                    
                    <div class="dating-author">
                        <img src="https://picsum.photos/200/200?random=208" alt="孙读书的头像" class="author-avatar">
                        <div class="author-info">
                            <p class="author-name">孙读书</p>
                            <div class="author-meta">
                                <span class="location">
                                    <i class="fas fa-map-marker-alt fa-sm"></i>
                                    <span>知行者书店</span>
                                </span>
                                <span>· 科幻作家</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="dating-actions">
                        <div class="action-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>1.1k</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>28</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-user"></i>
                                <span>15</span>
                            </div>
                        </div>
                        <div class="action-buttons">
                            <button class="action-btn">
                                <i class="far fa-heart"></i>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-bookmark"></i>
                            </button>
                            <button class="action-btn">
                                <i class="fas fa-check-circle"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 1张图片的约会 -->
            <div class="dating-card animate-in">
                <div class="dating-media media-regular">
                    <div class="image-grid one-img">
                        <img src="https://picsum.photos/600/600?random=60" alt="马拉松比赛图片">
                    </div>
                    <div class="image-count">
                        <i class="fas fa-images"></i> 1
                    </div>
                    <div class="date-badge">11月5日</div>
                </div>
                
                <div class="dating-content">
                    <span class="dating-category cat-sport">运动健身</span>
                    <h3 class="dating-title">城市半程马拉松，寻找跑友一起训练参赛</h3>
                    
                    <p class="dating-desc">
                        报名了今年的城市半程马拉松，希望找些志同道合的跑友一起训练。目前每周训练3次，有一定跑步基础，欢迎各种水平的跑者加入，一起进步，比赛当天互相加油。
                    </p>
                    
                    <div class="dating-author">
                        <img src="https://picsum.photos/200/200?random=209" alt="郑跑步的头像" class="author-avatar">
                        <div class="author-info">
                            <p class="author-name">郑跑步</p>
                            <div class="author-meta">
                                <span class="location">
                                    <i class="fas fa-map-marker-alt fa-sm"></i>
                                    <span>奥林匹克公园</span>
                                </span>
                                <span>· 健身教练</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="dating-actions">
                        <div class="action-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>2.3k</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>56</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-user"></i>
                                <span>32</span>
                            </div>
                        </div>
                        <div class="action-buttons">
                            <button class="action-btn">
                                <i class="far fa-heart"></i>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-bookmark"></i>
                            </button>
                            <button class="action-btn">
                                <i class="fas fa-check-circle"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 加载更多按钮 -->
        <div class="load-more">
            <button class="load-more-btn">
                <i class="fas fa-refresh me-2"></i>加载更多约会
            </button>
        </div>
    </div>
    
    <!-- 页脚 -->
    <footer class="bg-white py-5 border-top">
        <div class="container text-center">
            <div class="mb-3">
                <a href="#" class="text-muted me-3"><i class="fab fa-weibo"></i></a>
                <a href="#" class="text-muted me-3"><i class="fab fa-wechat"></i></a>
                <a href="#" class="text-muted"><i class="fab fa-instagram"></i></a>
            </div>
            <p class="text-muted mb-0">© 2023 遇见 - 让每一次相遇都充满意义</p>
        </div>
    </footer>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 卡片动画显示
            const animateElements = document.querySelectorAll('.animate-in');
            
            const observer = new IntersectionObserver((entries) => {
                entries.forEach((entry, index) => {
                    if (entry.isIntersecting) {
                        setTimeout(() => {
                            entry.target.style.opacity = '1';
                            entry.target.style.transform = 'translateY(0)';
                        }, index * 100);
                        observer.unobserve(entry.target);
                    }
                });
            }, { threshold: 0.1 });
            
            animateElements.forEach(el => observer.observe(el));
            
            // 分类切换
            const categoryItems = document.querySelectorAll('.category-item');
            categoryItems.forEach(item => {
                item.addEventListener('click', function() {
                    categoryItems.forEach(i => i.classList.remove('active'));
                    this.classList.add('active');
                    // 实际项目中添加分类筛选逻辑
                });
            });
            
            // 视图切换
            const viewButtons = document.querySelectorAll('.action-btn[title="网格视图"], .action-btn[title="列表视图"]');
            const datingGrid = document.querySelector('.dating-grid');
            
            viewButtons.forEach(btn => {
                btn.addEventListener('click', function() {
                    viewButtons.forEach(b => b.classList.remove('active'));
                    this.classList.add('active');
                    
                    if (this.title === '列表视图') {
                        datingGrid.style.gridTemplateColumns = '1fr';
                    } else {
                        datingGrid.style.gridTemplateColumns = 'repeat(auto-fill, minmax(300px, 1fr))';
                    }
                });
            });
            
            // 点赞功能
            const likeButtons = document.querySelectorAll('.action-btn[title="点赞"]');
            likeButtons.forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    const icon = this.querySelector('i');
                    const statItem = this.closest('.dating-actions').querySelector('.stat-item:nth-child(3)');
                    
                    if (icon.classList.contains('far')) {
                        // 点赞
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        this.classList.add('liked');
                        let count = parseInt(statItem.querySelector('span').textContent.replace(/,/g, ''));
                        statItem.querySelector('span').textContent = (count + 1).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                    } else {
                        // 取消点赞
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        this.classList.remove('liked');
                        let count = parseInt(statItem.querySelector('span').textContent.replace(/,/g, ''));
                        statItem.querySelector('span').textContent = (count - 1).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                    }
                });
            });
            
            // 收藏功能
            const saveButtons = document.querySelectorAll('.action-btn[title="收藏"]');
            saveButtons.forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    const icon = this.querySelector('i');
                    
                    if (icon.classList.contains('far')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        this.classList.add('saved');
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        this.classList.remove('saved');
                    }
                });
            });
            
            // 报名参加功能
            const joinButtons = document.querySelectorAll('.action-btn[title="报名参加"]');
            joinButtons.forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    const title = this.closest('.dating-card').querySelector('.dating-title').textContent;
                    const statItem = this.closest('.dating-actions').querySelector('.stat-item:nth-child(3)');
                    
                    if (confirm(`确定要报名参加 "${title}" 吗？`)) {
                        let count = parseInt(statItem.querySelector('span').textContent.replace(/,/g, ''));
                        statItem.querySelector('span').textContent = (count + 1).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                        this.innerHTML = '<i class="fas fa-check"></i> 已报名';
                        this.disabled = true;
                        this.style.color = '#38a169';
                    }
                });
            });
            
            // 卡片点击事件
            const datingCards = document.querySelectorAll('.dating-card');
            datingCards.forEach(card => {
                card.addEventListener('click', function() {
                    const title = this.querySelector('.dating-title').textContent;
                    window.location.href = `#${encodeURIComponent(title)}`;
                    alert(`查看约会详情: ${title}`);
                });
            });
            
            // 加载更多按钮
            const loadMoreBtn = document.querySelector('.load-more-btn');
            loadMoreBtn.addEventListener('click', function() {
                const icon = this.querySelector('i');
                icon.classList.add('fa-spin');
                this.disabled = true;
                
                // 模拟加载延迟
                setTimeout(() => {
                    icon.classList.remove('fa-spin');
                    this.disabled = false;
                    alert('已加载全部约会活动');
                }, 1500);
            });
            
            // 排序功能
            const sortSelect = document.querySelector('.sort-control');
            sortSelect.addEventListener('change', function() {
                console.log('排序方式变更为: ' + this.value);
                // 实际项目中添加排序逻辑
            });
        });
    </script>
</body>
</html>

